<template>
  <div class="coment">
    <div class="headerBox" style="font-size:.34rem">资讯</div>
    <div class="com_box pageContentPaddingT2">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="5000"  indicator-color="white" :width="swipeWidth">
          <van-swipe-item>
            <div class="goodsImg">
              <img src="@/assets/img/banner1.png" alt="">
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="goodsImg">
              <img src="@/assets/img/banner2.png" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title_box">
        <span class="shu"></span>
        <span class="text">港湾快讯</span>
        <span style="font-size:.24rem;color:#858585;margin-left: .12rem;">专业导读</span>
        <span style="float: right;" @click="goFlash(consultList.typeId)" v-if="consultList.articleList&&consultList.articleList.length>4">更多></span>
      </div>
      <div class="flash_box">
        <div class="sml_box" @click="goDetail()">
          <img src="../../assets/img/goods/goodsImg.jpg" alt="">
          <div class="cont_dac">
            <span class="icon"></span>
            <span style="line-height: .36rem;">黄西的幽默沟通课：从自卑到自信的表达艺术</span>
          </div>
          <div class="time">2020.08.22</div>
        </div>
        <div class="sml_box">
          <img src="../../assets/img/goods/goodsImg.jpg" alt="">
          <div class="cont_dac">
            <span style="line-height: .36rem;">黄西的幽默沟通课：从自卑到自信的表达艺术</span>
          </div>
          <div class="time">2020.08.22</div>
        </div>
      </div>
      <!-- <div class="flash_box" v-if="consultList && consultList.articleList">
        <div class="sml_box" v-for="(item, index) in consultList.articleList.slice(0 , 4)" :key="index" @click="goDetail(item.id)">
          <img :src="item.img" alt="">
          <div class="cont_dac">
            <span class="icon" v-if="item.flag == 1"></span>
            <span>{{item.name}}</span>
          </div>
          <div class="time">{{item.time}}</div>
        </div>
      </div> -->
      <div style="clear:both"></div>
      <div class="title_box" style="margin-top: .4rem;">
        <span class="shu"></span>
        <span class="text">行业资讯</span>
        <span style="font-size:.24rem;color:#858585;margin-left: .12rem;">最新报道</span>
      </div>
       <div class="message_box">
        <div class="msg_box">
          <div class="lf_box">
            <div>经验分享：如何才能更好的拓展客户</div>
            <span class="time_date">2019.12.21</span>
          </div>
          <div class="rg_box">
            <img src="../../assets/img/goods/goodsImg.jpg" alt="">
          </div>
        </div>
        <div class="msg_box">
          <div class="lf_box">
            <div>经验分享：如何才能更好的拓展客户</div>
            <span class="time_date">2019.12.21</span>
          </div>
          <div class="rg_box">
            <img src="../../assets/img/goods/goodsImg.jpg" alt="">
          </div>
        </div>
      </div>
      <!-- <div class="message_box" v-if="flashList && flashList.articleList">
        <div class="msg_box"  v-for="(item,index) in flashList.articleList" :key="index" @click="goDetail(item.id)">
          <div class="lf_box">
            <div>{{item.name}}</div>
            <span class="time_date">{{item.time}}</span>
          </div>
          <div class="rg_box">
            <img :src="item.img" alt="">
          </div>
        </div>
      </div> -->
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      flashList: {},
      consultList: {},
      swipeWidth:''
    }
  },
  activated(){
    this.userArticleList()
  },
  mounted(){
    let fontSize= getComputedStyle(window.document.documentElement)['font-size']
    this.swipeWidth = parseFloat(fontSize)*6.93
  },
  methods:{
    async userArticleList() {
      let res = await this.$http.userArticleList({
        page: 1,
        pageSize: 20
      })
      if (res) {
        this.flashList = res.data[1],
        this.consultList = res.data[2]
      }
    },
    goFlash(typeId){
      this.$router.push({name:'flashIndex', query: {typeId: typeId}})
    },
    goDetail(id) {
      this.$router.push({name: 'articleDetail',query: {id:id}})
    }
  }
};
</script>

<style scoped>
.coment{
  background: #fff;
  min-height: 100vh;
}
.headerBox{
  height: 0.8rem;
  line-height: 0.8rem;
  margin-bottom: 0.2rem;
  font-size: .44rem;
  color: #333333;
  font-weight: 600;
  position: fixed;
  width: 100%;
  padding: 0 .29rem;
  background: #fff;
  z-index: 1;
}
.com_box{
  padding: 1rem .28rem 1rem;
}

.banner{
  margin-bottom: .26rem;
}
.my-swipe{
  height: 3.87rem;
  border-radius: .08rem;
}
.my-swipe .goodsImg{
  height: 3.88rem;
}
.my-swipe .goodsImg img{
  width: 100%;
  height: 3.88rem;
}
.title_box{
  width: 100%;
  height: .48rem;
  line-height: .48rem;
  font-size: .22rem;
  color: #141415;
}
.title_box .shu{
  /* position: relative;
  top: -0.02rem; */
  display: inline-block;
  width: .06rem;
  height: .26rem;
  background: #287FFF;
  border-radius: 0px 2rem 2rem 0px;
  margin-right: .14rem;
}
.title_box .text{
  font-size: .34rem;
  color: #333;
  font-weight: 600;
}
.flash_box{
  margin-top: .2rem;
  margin-bottom: .4rem;
}
.sml_box{
  margin-right: .14rem;
  margin-bottom: .15rem;
  float: left;
  width: 3.40rem;
}
.sml_box:nth-child(2n){
  margin-right: 0;
}
.sml_box img{
  width: 100%;
  height: 2rem;
  border-radius: .08rem;
  margin-bottom: .12rem;
}
.sml_box span.icon{
  display: inline-block;
  width: .52rem;
  height: .28rem;
  background: url('../../assets/img/img_tuijian@2x.png')no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: .02rem;
  margin-right: .1rem;
}
.sml_box .cont_dac{
  font-size: .26rem;
  font-weight: 600;
  margin-bottom: .12rem;
  height: .72rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sml_box .time{
  color: #9B9B9B;
  font-size: .22rem;
}
.msg_box{
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: .12rem;
}
.lf_box,.rg_box{
  width: 50%;
}
.lf_box{
  padding: .16rem 0;
  font-weight: 600;
  position: relative;
}
.lf_box .time_date{
  position: absolute;
  bottom: .1rem;
  font-size: .24rem;
  color: #999999;
}
.rg_box{
  height: 2rem;
}
.rg_box> img{
  width: 100%;
  height: 100%;
  border-radius: .1rem;
}
</style>
